<template>
  <div class="item-container">
    <a-space :size="16" direction="vertical" fill>
      <a-descriptions
        v-for="(item, idx) in blockDataList"
        :key="idx"
        :label-style="{
          textAlign: 'right',
          width: '200px',
          paddingRight: '10px',
          color: 'rgb(var(--gray-8))',
        }"
        :value-style="{ width: '400px' }"
        :title="item.title"
        :data="item.data"
      >
        <template #value="{ value }">
          <a-skeleton v-if="loading" :animation="true">
            <a-skeleton-line :widths="['200px']" :rows="1" />
          </a-skeleton>
          <span v-else>{{ value }}</span>
        </template>
      </a-descriptions>
    </a-space>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { ProfileBasicRes } from '@/api/profile'

type BlockList = {
  title: string
  data: {
    label: string
    value: string
  }[]
}[]
export default defineComponent({
  props: {
    type: {
      type: String,
      default: '',
    },
    renderData: {
      type: Object as PropType<ProfileBasicRes>,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { t } = useI18n()
    const blockDataList = computed<BlockList>(() => {
      const { renderData } = props
      const result = []
      result.push({
        title: props.type === 'pre' ? t('basicProfile.title.preVideo') : t('basicProfile.title.video'),
        data: [
          {
            label: t('basicProfile.label.video.mode'),
            value: renderData?.video?.mode || '-',
          },
          {
            label: t('basicProfile.label.video.acquisition.resolution'),
            value: renderData?.video?.acquisition.resolution || '-',
          },
          {
            label: t('basicProfile.label.video.acquisition.frameRate'),
            value: `${renderData?.video?.acquisition.frameRate || '-'} fps`,
          },
          {
            label: t('basicProfile.label.video.encoding.resolution'),
            value: renderData?.video?.encoding.resolution || '-',
          },
          {
            label: t('basicProfile.label.video.encoding.rate.min'),
            value: `${renderData?.video?.encoding.rate.min || '-'} bps`,
          },
          {
            label: t('basicProfile.label.video.encoding.rate.max'),
            value: `${renderData?.video?.encoding.rate.max || '-'} bps`,
          },
          {
            label: t('basicProfile.label.video.encoding.rate.default'),
            value: `${renderData?.video?.encoding.rate.default || '-'} bps`,
          },
          {
            label: t('basicProfile.label.video.encoding.frameRate'),
            value: `${renderData?.video?.encoding.frameRate || '-'} fpx`,
          },
          {
            label: t('basicProfile.label.video.encoding.profile'),
            value: renderData?.video?.encoding.profile || '-',
          },
        ],
      })

      result.push({
        title: props.type === 'pre' ? t('basicProfile.title.preAudio') : t('basicProfile.title.audio'),
        data: [
          {
            label: t('basicProfile.label.audio.mode'),
            value: renderData?.audio?.mode || '-',
          },
          {
            label: t('basicProfile.label.audio.acquisition.channels'),
            value: `${renderData?.audio?.acquisition.channels || '-'} ${t('basicProfile.unit.audio.channels')}`,
          },
          {
            label: t('basicProfile.label.audio.encoding.channels'),
            value: `${renderData?.audio?.encoding.channels || '-'} ${t('basicProfile.unit.audio.channels')}`,
          },
          {
            label: t('basicProfile.label.audio.encoding.rate'),
            value: `${renderData?.audio?.encoding.rate || '-'} kbps`,
          },
          {
            label: t('basicProfile.label.audio.encoding.profile'),
            value: renderData?.audio?.encoding.profile || '-',
          },
        ],
      })

      return result
    })

    return {
      blockDataList,
    }
  },
})
</script>

<style scoped lang="less">
.item-container {
  padding-top: 20px;
  :deep(.arco-descriptions-item-label) {
    font-weight: normal;
  }
}
</style>
